<template>
  <ScaleScreen :autoScale="{ x: true, y: true }">
    <div :class="['screen', screenStore.theme]">
      <Header></Header>
      <div class="screen-main">
        <div class="screen-left">
          <Left></Left>
        </div>
        <div class="screen-center">
          <Center></Center>
        </div> 
        <div class="screen-right">
          <Right></Right>
        </div>
      </div>
    </div>
  </ScaleScreen>
</template>
<script setup lang="ts">
import ScaleScreen from '@/components/scale-screen/index';
import Header from "./components/Header.vue"
import Left from "./components/left2/index.vue"
import Right from "./components/right/index.vue"
import Center from "@/views/screen/components/center/index.vue"
import { useScreenStore } from "@/stores";


const screenStore = useScreenStore();


</script>
<style scoped lang="scss">
.screen {
  --ds-screen-width: 1920px;
  --ds-screen-height: 1080px;
  --ds-header-height: 72px;
  --ds-block-bg: #222733;
  --ds-screen-bg: rgb(22, 21, 24);
  --ds-screen-text-color: #fff;
  position: absolute;
  padding: 0 20px;
  background: var(--ds-screen-bg);
  color: var(--ds-screen-text-color);
  animation-name:slide;

  &-main {
    position: relative;
    display: flex;
    height: calc(100% - var(--ds-header-height));
  }

  &-center {
    flex: 1;
    width: calc(var(--ds-screen-width) - 1000px);
  }

  &-left,
  &-right {
    width: 460px;
  }
}

.light{
  --ds-screen-bg: #f0f2f5;
  --ds-screen-text-color: #000;
  --ds-block-bg: #fff;
}

@keyframes slide {
  0% {
    transform: translateX(-100%);
  }

  80% {
    transform: translateX(20px);
  } 

  100% {
    transform: translateX(0);
  }
  
}
</style>